<template>
    <!-- <ListSearch ref="ListSearchRef" :unaudited="unaudited" :exportStatus="!checkList.length" @submit="onSearch" @handle="handleTable" @getTableH="getTableH" /> -->
    <div class="business_list_container">
        <div class="button_box">
            <span :class="[state.searchParams.stage_state == 0 ? 'btn active' : 'btn']" @click="onChangeState(0)">
                全部商机
            </span>
            <span
                :class="[state.searchParams.stage_state == 1 ? 'btn active' : 'btn', 'postion']"
                @click="onChangeState(1)">
                待审核<span v-if="unaudited" class="badeg">{{ unaudited }}</span>
            </span>
            <span :class="[state.searchParams.stage_state == 2 ? 'btn active' : 'btn']" @click="onChangeState(2)">
                已审核
            </span>
        </div>
        <ZwSearchForm row-num="3" :option="formSearchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :row-key="getRowKey"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @selection-change="onSelectionChange"
            @select-all="onSelectAll"
            @dataChange="onDataChange">
            <template #headerOperateLeft>
                <div class="fun_box">
                    <div v-if="state.searchParams.stage_state == 1"></div>
                    <div v-else class="left">
                        <template v-if="state.searchParams.stage_state != 2">
                            <span class="menu_l"> </span>
                            <span class="border"></span>
                            <span class="menu_l menu_r" @click="handleTable('MENU')"> </span>
                            <el-checkbox
                                v-model="state.searchParams.is_overdue"
                                :true-label="1"
                                :false-label="2"
                                @change="reloadTable">
                                逾期商机
                            </el-checkbox>
                            <el-checkbox
                                v-model="state.searchParams.is_mine"
                                :true-label="1"
                                :false-label="2"
                                @change="reloadTable">
                                仅归属为自己的
                            </el-checkbox>
                            <el-checkbox
                                v-model="state.searchParams.is_assist"
                                :true-label="1"
                                :false-label="2"
                                @change="reloadTable">
                                自己协助的
                            </el-checkbox>
                        </template>
                        <el-checkbox
                            v-else
                            v-model="state.searchParams.is_mine_audit"
                            :true-label="1"
                            :false-label="2"
                            @change="reloadTable">
                            我审核的
                        </el-checkbox>
                    </div>
                </div>
            </template>
            <template #headerOperate>
                <el-button plain :disabled="!checkList.length" @click="handleTable('EXPORT')"> 导出列表 </el-button>
                <el-button type="primary" @click="handleTable('CREATE')">新建商机</el-button>
            </template>
        </ZwTable>
        <AddFollowDrawer ref="AddFollowDrawerRef" @submit="onAddFollowDrawer" />
        <ListLoseDialog ref="ListLoseDialogRef" @submit="onTablereload" />
        <AuditDialog ref="AuditDialogRef" />
    </div>
</template>

<script setup lang="tsx">
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';

import { searchOption } from './ListSearch';
import { useSubmitContent, stageState, tableOption } from './ListTable';
import AddFollowDrawer from './AddFollowDrawer.vue';
import ListTable from './ListTable.vue';
import ListLoseDialog from './ListLoseDialog.vue';
import AuditDialog from './AuditDialog.vue';
import { getBusinessList, businessExport } from '@/api/salesleads/salesmanagement/business';

import { ref, reactive, computed, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import { downFile } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import { deepCopy } from '@/utils/helper';
const emit = defineEmits(['submit']);
const ListSearchRef: any = ref(null);
const PaginationRef: any = ref(null);
const AddFollowDrawerRef: any = ref(null);
const ListLoseDialogRef: any = ref(null);
const AuditDialogRef: any = ref(null);
const tableRef: any = ref(null);
const router = useRouter();
const pageData = reactive({
    page: 1,
    page_size: 15
});
const onChangeState = (value: any) => {
    stageState.value = value;
    state.searchParams.stage_state = value;
    currentParams.value = { ...state.searchParams };
};
const getRowKey = (row: any) => {
    return row.business_id;
};
const formSearchOption = computed(() => {
    const filterOptions = {
        0: ['audit_created_at', 'audit_time', 'audit_created_uid', 'audit_uid'],
        1: ['created_at', 'audit_time', 'assist_ids', 'audit_uid'],
        2: ['created_at', 'audit_created_at', 'assist_ids', 'audit_created_uid']
    };
    return searchOption.filter(searchItem => !filterOptions[stageState.value].includes(searchItem.name));
});

const unaudited = ref(0);
const checkList = ref([]);
const fetchApi = () => {
    // 获取文件列表
    // return getFissionList
    return getBusinessList;
};
const onDataChange = (res: any) => {
    unaudited.value = res.unaudited;
};
// 选中表格 checkbox
const onSelect = (selection: any, row: any) => {
    if (selection.constructor === Array) checkList.value = selection.map((v: any) => v.business_id);
};
// 选择项变更
const onSelectionChange = (selection: any) => {};
// 全选
const onSelectAll = (selection: any) => {
    checkList.value = selection.map((v: any) => v.business_id);
};
// 刷新表格
const reloadTable = () => {
    tableRef.value.clearSelection();
    tableRef.value.reload();
};

const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);

const defaultParams: any = reactive({
    name: '', //商机名称
    workflow_id: '', //商机流程ID
    stage_id: '', //商机流程阶段ID
    amount: [], //商机金额
    belong_uid: '', //归属员工
    assist_ids: [], //协助员工
    audit_created_uid: '', // 提审员工
    audit_uid: '', // 审核员工
    cust_info: '', //主客户
    created_at: [], //创建时间
    predict_time: '', //预计赢单日期
    actual_time: '', //实际赢单日期
    audit_created_at: [], //提审时间
    audit_time: [], //审核时间
    is_overdue: 2, //是否逾期 1是 2否
    is_mine: 2, //是否仅归属自己的 1是 2否
    is_assist: 2, //是否自己协助的 1是 2否
    is_mine_audit: 2, //是否我审核的 1是 2否
    stage_state: 0 // 0全部 1待审核 2已审核
});
const state = reactive({
    searchParams: deepCopy(defaultParams),
    searchHeight: '208px'
});
const search = (v: any) => {
    currentParams.value = { ...currentParams.value, ...v };
    tableRef.value.clearSelection();
    state.searchParams = {
        ...deepCopy(defaultParams),
        ...v,
        stage_state: state.searchParams.stage_state
    };
};
const reset = (v: any) => {
    tableRef.value.clearSelection();
    state.searchParams = { ...deepCopy(defaultParams) };
    currentParams.value = null;
};
/**
 * @description: 展开收起
 */
const expandHandle = (expand: boolean) => {
    state.searchHeight = expand ? '208px' : '64px';
};

// 刷新列表
const onTablereload = () => {
    tableRef.value.clearSelection();
    ListSearchRef.value.onSubmit();
};
const handleTable = (type: string, row?: any) => {
    const obj = {
        RELOADTABLE: () => onTablereload(),
        CHECKED: () => (checkList.value = row),
        ADD_FOLLOW: () => AddFollowDrawerRef.value.handleShow(row),
        LOSE: () => ListLoseDialogRef.value.onData(row),
        DETAIL: () => router.push(`/salesleads/salesmanagement/business/detail?id=${row.business_id}`),
        CREATE: () => router.push('/salesleads/salesmanagement/business/create'),
        LOOK: () => router.push(`/salesleads/salesmanagement/business/create?type=look&id=${row.business_id}`),
        EDIT: () => router.push(`/salesleads/salesmanagement/business/create?type=edit&id=${row.business_id}`),
        THROUGH: () => AuditDialogRef.value.handleAuditDialog(row, 'THROUGH'),
        NO_THROUGH: () => AuditDialogRef.value.handleAuditDialog(row, 'NO_THROUGH'),
        MENU: () => emit('submit', 'MENU'),
        EXPORT: () =>
            businessExport({
                business_ids: checkList.value,
                stage_state: stageState.value
            }).then((res: any) => {
                downFile(res.url, res.name);
                ElMessage.success('导出成功');
                tableRef.value.clearSelection();
                checkList.value = [];
            })
    };
    obj[type]();
};
useSubmitContent.submit = handleTable;

const getTableH = () => {
    tableRef.value.getTableH();
};

// 添加跟进保存成功
const onAddFollowDrawer = () => {
    tableRef.value.clearSelection();
};

onActivated((val: any) => {
    tableRef.value.clearSelection();
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>

<style lang="scss" scoped>
.business_list_container {
    height: calc(100vh - 232px);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.button_box {
    margin-bottom: 16px;

    .active {
        background-color: #fff1ed !important;
        color: #ff6b00;
    }

    .btn {
        padding: 8px 16px;
        line-height: 36px;
        background-color: #f9f9f9;
        margin-right: 15px;
        margin-bottom: 16px;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            background-color: #fff1ed;
            color: #ff6b00;
        }
    }

    .postion {
        position: relative;

        .badeg {
            position: absolute;
            top: 3px;
            right: -1px;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 50%;
            border: 1px solid #ff6b00;
            font-size: 10px;
            color: #ff6b00;
        }
    }
}

.fun_box {
    display: flex;
    justify-content: space-between;
    font-size: 30px;

    .left {
        display: flex;
        align-items: center;

        .menu_l {
            width: 16px;
            height: 16px;
            margin-right: 20px;
            cursor: pointer;
            color: #969696;
            background: url('');
            background-size: 100%;
        }

        .menu_r {
            background: url('');
            background-size: 100%;
        }

        .border {
            margin-right: 15px;
            color: #d8d8d8;
            height: 20px;
            width: 1px;
            background: #d8d8d8;
        }
    }
}
</style>
